<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片列表</title>
	<!-- 返回首页的按钮 -->
	<a class="btn btn-primary" th:href="@{/index}" role="button">返回首页</a>
	<!-- 引入Bootstrap CSS -->
	<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
</head>
<body>
	<form method="POST" action="/picture/upload" enctype="multipart/form-data">  
	    <div class="mb-3">  
	        <input type="file" name="file" class="form-control" />  
	    </div>  
	    <button type="submit" class="btn btn-success">上传</button>  
	</form>  
	<div class="container mt-3">
	    <h2>图片列表</h2>
	    <table class="table table-bordered table-hover">
	        <thead class="thead-dark">
	        <tr>
	            <th>ID</th>
	            <th>图片名称</th>
	            <th>发布日期</th>
	            <th>图片</th>
	            <th>删了</th>
	        </tr>
	        </thead>
	        <tbody>
	        <!-- 使用Thymeleaf遍历文章列表 -->
	        <tr th:each="picture : ${pictureList}">
	            <td th:text="${picture.id}">1</td>
	            <td th:text="${picture.filename}">图片名称</td>
	            <td th:text="${#dates.format(picture.createTime, 'yyyy-MM-dd HH:mm:ss')}">发布日期</td>
				<td><img th:src="@{${picture.url}}" alt="私人图片" style="width: 100px; height: 100;"></td>
				<td>
					<a class="btn btn-danger" th:href="@{/picture/delete(id=${picture.id})}" role="button" onclick="return confirm('确定要删除吗？')">删除</a>
				</td>
	        </tr>
	        </tbody>
	    </table>
	</div>
<!-- 引入Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>